<script lang="ts" setup>
  import Divider from '@sscd/divider';
  import Button from '@sscd/button';
  import Tooltip from '@sscd/tooltip';
  const colors = [
    'pink',
    'red',
    'yellow',
    'orange',
    'cyan',
    'green',
    'blue',
    'purple',
    'geekblue',
    'magenta',
    'volcano',
    'gold',
    'lime',
  ];
  const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
</script>

<template>
  <div class="demo">
    <div class="demo-title">多彩文字提示</div>
    <div class="demo-content">
      <Divider orientation="left">Presets</Divider>
      <div>
        <Tooltip v-for="color in colors" :key="color" title="prompt text" :color="color">
          <Button>{{ color }}</Button>
        </Tooltip>
      </div>
      <Divider orientation="left">Custom</Divider>
      <div>
        <Tooltip v-for="color in customColors" :key="color" title="prompt text" :color="color">
          <Button>{{ color }}</Button>
        </Tooltip>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .demo {
    .ant-btn {
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
</style>
